<!--
 * @Author: Smthie Smthie@qq.com
 * @Date: 2024-05-20 09:12:05
 * @LastEditors: Smthie Smthie@qq.com
 * @LastEditTime: 2024-05-27 11:06:27
 * @FilePath: \ProtocolTool\src\renderer\src\components\LiveDataCard\index.vue
-->
<script lang="ts" setup>
defineProps({
  title: String
})
const liveStatus = defineModel({ type: Boolean })
</script>

<template>
  <div class="live-data-card">
    <div class="header">
      <div class="title">{{ title }}</div>
      <a-switch v-model:checked="liveStatus" checked-children="开" un-checked-children="关" />
    </div>
    <div class="main">
      <slot>
        <a-empty />
      </slot>
    </div>
  </div>
</template>

<style lang="less" scoped>
.live-data-card {
  background: #fff;
  border-radius: 4px;
  margin-bottom: 24px;

  .header {
    padding: 0 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title {
      font-weight: 500;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
      margin-right: 16px;
    }
  }

  .main {
    padding: 0;
  }
}
</style>
